<template>
  <van-popup v-model="show" position="bottom" :style="{ height: '100%' }">
    <div class="Census page">
      <van-nav-bar title="代理详情" left-arrow @click-left="$router.go(-1)"/>
      <div style="background-image: linear-gradient(-90deg, #1469fe 0%,  #2775fd 100%); position: relative; overflow: hidden;">
        <top-search @search="searchFunc" v-model="search.content"></top-search>
        <div class="top-picker" style="background: none;">
          <div class="picker-item" style="color: #fff;">
            <span @click="showSelePerson = true">
              <span>{{ search.User }}</span>
              <van-icon name="play" class="trans"/>
            </span>
          </div>
        </div>
        <div class="detail-nav">
          <div class="detail-nav-item" v-for="item in topnav" :key="item.label" :class="{ active: search.vague == item.value }"
            @click="changeNav(item)">{{ item.label }}</div>
        </div>
      </div>
      <van-list class="page-content" v-model="page.loading" :finished="page.finished" finished-text="没有更多了" @load="getList">
        <div class="list-item" v-for="(item, index) in list" :key="index">
          <template v-if="search.vague == 0">
            <div class="list-group flex-row" style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
              <div class="flex-row">
                <img :src="'./img/a1.png'" style="width: 0.6rem; height: 0.6rem; border-radius: 50%;"/>
                <span class="font-black" style="font-size: 14px; margin-left: 0.28rem;">{{ item.shopName }}</span>
              </div>
            </div>
            <div class="list-group justify">
              <div class="list-row">
                <span class="label-text">租借人次</span>
                <span>{{ item.leaseNumber }}次</span>
              </div>
              <div class="list-row">
                <span class="label-text">总金额</span>
                <span class="font-red">{{ item.totalFee }}元</span>
              </div>
              <div class="list-row">
                <span class="label-text">分成金额</span>
                <span class="font-red">{{ item.proportionMoney }}元</span>
              </div>
            </div>
            <div class="list-group justify">
              <div class="list-row">
                <span class="label-text">公司分成比例(60%)</span>
                <span>无</span>
              </div>
              <div class="list-row">
                <span class="label-text">商户分成比例(60%)</span>
                <span>无</span>
              </div>
              <div class="list-row">
                <span class="label-text">代理商分成比例(60%)</span>
                <span>无</span>
              </div>
            </div>
          </template>
          <template v-else-if="search.vague == 1">
            <div class="list-group flex-row" style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
              <div class="flex-row">
                <img :src="'./img/d0.png'" style="width: 0.6rem; height: 0.6rem; border-radius: 50%;"/>
                <span class="font-black" style="font-size: 14px; margin-left: 0.28rem;">{{ item.deviceType }}口充电宝柜机</span>
              </div>
            </div>
            <div class="list-group justify">
              <div class="list-row">
                <span class="label-text">设备编号</span>
                <span>{{ item.chargerSn }}</span>
              </div>
              <div class="list-row">
                <span class="label-text">所属门店</span>
                <span class="font-blue">{{ item.shopName }}</span>
              </div>
              <div class="list-row">
                <span class="label-text">设备类型</span>
                <span>{{ item.deviceType }}口</span>
              </div>
              <div class="list-row">
                <span class="label-text">租借人数</span>
                <span>{{ item.leaseNumber }}</span>
              </div>
              <div class="list-row">
                <span class="label-text">设备类型</span>
                <span class="font-red">{{ item.totalFee }}元</span>
              </div>
            </div>
          </template>
        </div>
      </van-list>
    </div>

    <sele-person v-model="showSelePerson" @submit="seleUser" :role="[ 1 ]"></sele-person>
  </van-popup>
</template>

<script>
export default {
  data() {
    return {
      nav: [
        { label: '我的数据', value: 0 },
        { label: '租借统计', value: 1 },
      ],

      topnav: [
        { label: '我的门店', value: 0 },
        { label: '我的设备', value: 1 }
      ],

      search: {
        content: '',
        vague: 0,
        userId: ''
      },

      page: {
        page: 1,
        size: 10,
        loading: false,
        finished: false
      },
      
      list: [],

      show: false,

      showSelePerson: false

    };
  },
  methods: {
    getList() {
      let sPage = JSON.parse(JSON.stringify(this.page));
      let page = sPage.page, size = sPage.size;
      this.page.loading = true;
      
      let search = JSON.parse(JSON.stringify(this.search));
      let query = { ...search, page, size };
      if (!query.userId) return ;
      
      this.$axios.get('/api/chargerPlaEquipmentController/getLeaseStatistics', query).then(res => {
        if(search.vague != this.search.vague) return ;
        let json = res || {}; 
        let list = json.list || [];
        list = list.filter(item => {
          return this.search.vague != 1 || item.deviceType;
        });
        this.list.push( ...list );
        let finished = json.isLastPage ? true : false;
        this.page = { ...sPage, page: sPage.page + 1, loading: false, finished };
      }).catch(() => {
        this.page = { ...sPage, loading: false, finished: true };
      });
    },
    searchFunc() {
      this.page = { page: 1, size: 10, loading: false, finished: false };
      this.list = [];
      this.getList();
    },
    changeNav(item) {
      this.search.vague = item.value;
      this.searchFunc(); 
    },
    showBlank(userId, nick) {
      this.search = { ...this.search, userId, User: nick + '名下门店和设备信息' };
      this.show = true;
      this.searchFunc();
    },
    seleUser(user) {
      this.search = { ...this.search, userId: user.userId, User: user.nick + '名下门店和设备信息' };
      this.searchFunc();
    }
  },
  mounted() { 
    let query = this.$route.query;
    this.showBlank(query.userId, query.nick);
  }
};
</script>

<style lang="less">
.Census {
  .detail-nav {
    height: 1.2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    .detail-nav-item {
      height: 0.67rem;
      line-height: 0.67rem;
      padding: 0 0.37rem;
      color: #fff;
      font-size: 14px;
      border-radius: 0.33rem;
      &.active {
        color: #4b79f1;
        background: #fff;
        font-weight: bold;
      }
    }
  }
}
</style>
